import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Table, Card, Input, Select, Icon, Button, Checkbox, message, Radio, Popconfirm, DatePicker,
  Tooltip, Divider, Form, Modal, Tag
} from 'antd';
import moment from 'moment';
import { stringify } from 'qs';
import $ from 'jquery';
import { Link, routerRedux } from 'dva/router';
import { DISPATCH_STATUS, DISPATCH_OPERATION, RIGHT, TASK_APPROVE_STATUS, CHANNELS, SOURCE, ORIGIN, ACT_TYPE } from '../../constants';
import TaskNameColumn from '../../components/TaskNameColumn';
import TrimSpan from '../../components/TrimSpan';
import MerchantTag from '../../components/MerchantTag';
import TaskStatusColumn from '../../components/TaskStatusColumn';
import DateTimeColumn from '../../components/DateTimeColumn';
import PublisherChannelsPopover from '../../components/PublisherChannelsPopover';
import DockPanel from '../../components/DockPanel';
import Extension from '../../components/Extension';
import styles from './TableList.less';
import PublishModal from './Modals/PublishModal';
import { queryTask, updateApproveTask } from '../../services/task';

const { RangePicker } = DatePicker;
const Search = Input.Search;
const { Option } = Select;
const FormItem = Form.Item;
const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

@connect(state => ({
  data: state.task.approverTask,
  loading: state.task.approverTaskLoading,
  currentUser: state.user.currentUser,
  teamUser: state.user.teamUser,
  suggestionUsers: state.team.suggestionUsers,
}))
@Form.create()

export default class TableList extends PureComponent {
  state = {
    nicaiCrx: null,
    version: '',
    modalVisible: false,
    selectedRows: [],
    selectedRowKeys: [],
    darenModalVisible: false,
    extension: '',
    extensionVisible: false,
    percent: 0,
    channel_list: [],
    search: '',
    channel_name: undefined,
    handin_time_start: null,
    handin_time_end: null,
  }

  componentWillMount() {
    const { dispatch, data: { pagination, approve_status, status }, currentUser, teamUser } = this.props;
    if (currentUser._id) {
      dispatch({
        type: 'task/fetchApproverTasks',
        payload: { ...pagination, approve_status, status, user_id: currentUser._id, team_id: teamUser.team_id, }
      });
    }
    const nicaiCrx = document.getElementById('nicaiCrx');
    nicaiCrx.addEventListener('setVersion', this.setVersion);
    nicaiCrx.addEventListener('setChannel', this.setChannel);
    if (!this.state.nicaiCrx) {
      this.setState({ nicaiCrx }, () => {
        setTimeout(() => {
          this.handleGetVersion();
        }, 1000);
      });
    }
  }
  componentWillUnmount() {
    const nicaiCrx = document.getElementById('nicaiCrx');
    nicaiCrx.removeEventListener('setChannel', this.setChannel);
    nicaiCrx.removeEventListener('setVersion', this.setVersion);
  }

  setVersion = (e) => {
    const data = JSON.parse(e.target.innerText);
    if (data.version) {
      this.setState({
        version: data.version,
      })
    }
    if (data.error) {
      message.destroy();
      message.warn(data.msg, 60 * 60);
      this.setState({
        actsLoading: false,
      });
    } else {
      this.handleGetChannel();
    }
  }
  setChannel = (e) => {
    const data = JSON.parse(e.target.innerText);
    if (data.itemList) {
      this.setState({
        channel_list: data.itemList,
      });
    }
  }
  handleGetVersion = () => {
    const customEvent = document.createEvent('Event');
    customEvent.initEvent('getVersion', true, true);
    this.state.nicaiCrx.dispatchEvent(customEvent);
  }
  handleGetChannel = () => {
    const customEvent = document.createEvent('Event');
    customEvent.initEvent('getChannel', true, true);
    this.state.nicaiCrx.dispatchEvent(customEvent);
  }
  handleFetch = () => {
    const { data: { pagination, approve_status, status }, dispatch, currentUser, teamUser } = this.props;
    const { search, channel_name, handin_time_start, handin_time_end } = this.state;
    dispatch({
      type: 'task/fetchApproverTasks',
      payload: { ...pagination, user_id: currentUser._id, approve_status, status, team_id: teamUser.team_id, search, channel_name, handin_time_start, handin_time_end }
    });
  }
  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch, currentUser, teamUser, data: { approve_status, status } } = this.props;
    const { search, channel_name, handin_time_start, handin_time_end } = this.state;
    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    const params = {
      team_id: teamUser.team_id,
      currentPage: pagination.current,
      pageSize: pagination.pageSize,
      user_id: currentUser._id,
      approve_status,
      status,
      ...filters,
      search, channel_name, handin_time_start, handin_time_end,
    };
    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }

    dispatch({
      type: 'task/fetchApproverTasks',
      payload: params,
    });
    this.handleRowSelectChange([], []);
  }
  handlePublish = (record) => {
    this.setState({
      selectedRowKeys: [record._id],
      selectedRows: [record],
    }, () => this.handlePublishAll());
  }
  handlePublishToTaobao = (task) => {
    const { currentUser } = this.props;
    this.state.nicaiCrx.innerText = JSON.stringify({ task: task, user: currentUser, channel_name: task.channel_name });
    const customEvent = document.createEvent('Event');
    customEvent.initEvent('publishToTaobao', true, true);
    this.state.nicaiCrx.dispatchEvent(customEvent);
  }
  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({ selectedRowKeys, selectedRows });
  }
  handleSearch = (value, name) => {
    const { dispatch, data: { pagination, approve_status, status }, currentUser, teamUser } = this.props;
    const { search, channel_name, handin_time_start, handin_time_end } = this.state;
    const values = {
      user_id: currentUser._id,
      approve_status,
      status,
    };
    if (name === 'time') {
      values['handin_time_start'] = value[0] ? value[0].format('YYYY-MM-DD 00:00:00') : '';
      values['handin_time_end'] = value[1] ? value[1].format('YYYY-MM-DD 23:59:59') : '';
      if (value && value[0]) {
        this.setState({ handin_time_start: value[0].format('YYYY-MM-DD 00:00:00'), handin_time_end: value[1].format('YYYY-MM-DD 23:59:59') });
      } else {
        this.setState({ handin_time_start: null, handin_time_end: null });
      }
    } else {
      values[name] = value;
      this.setState({ [name]: value });
    }
    dispatch({
      type: 'task/fetchApproverTasks',
      payload: {
        team_id: teamUser.team_id,
        currentPage: 1,
        pageSize: pagination.pageSize,
        search, channel_name, handin_time_start, handin_time_end,
        ...values,
      }
    });
  }
  handleSearchChange = (e) => {
    if (!e.target.value) {
      this.handleSearch(e.target.value, 'search')
    }
    this.setState({ search: e.target.value });
  }
  handleReject = (record) => {
    const { dispatch, currentUser } = this.props;
    dispatch({
      type: 'task/approve',
      payload: { _id: record._id, user_id: currentUser._id, approve_status: TASK_APPROVE_STATUS.rejected },
      callback: (result) => {
        if (result.error) {
          message.error(result.msg);
        } else {
          message.success(result.msg);
          this.handleFetch();
        }
      },
    });
  }
  handleApproveBatch = () => {
    const { dispatch, currentUser } = this.props;
    dispatch({
      type: 'task/approveBatch',
      payload: {
        user_id: currentUser._id,
        approve_status: TASK_APPROVE_STATUS.passed,
        list: this.state.selectedRows.map(item => ({ _id: item._id })),
      },
      callback: (result) => {
        if (result.error) {
          message.error(result.msg);
        } else {
          message.success(result.msg);
          this.handleFetch();
        }
      },
    });
  }
  changeApproveStatus = (e) => {
    const { data: { pagination, approve_status, status }, dispatch, currentUser, teamUser } = this.props;
    const { search, channel_name, handin_time_start, handin_time_end } = this.state;
    dispatch({
      type: 'task/fetchApproverTasks',
      payload: { ...pagination, team_id: teamUser.team_id, user_id: currentUser._id, approve_status: e.target.value, search, status, channel_name, handin_time_start, handin_time_end }
    });
    this.handleRowSelectChange([], []);
  }
  // changeDispatchStatus = (e) => {
  //   const { data: { pagination, approve_status }, dispatch, currentUser, teamUser } = this.props;
  //   const { search, channel_name, handin_time_start, handin_time_end } = this.state;
  //   dispatch({
  //     type: 'task/fetchApproverTasks',
  //     payload: { ...pagination, team_id: teamUser.team_id, user_id: currentUser._id, approve_status, status: e.target.value, search, channel_name, handin_time_start, handin_time_end }
  //   });
  //   this.handleRowSelectChange([], []);
  // }
  handleExport = () => {
    const { data: { pagination, approve_status, status }, dispatch, currentUser, teamUser } = this.props;
    const { search, channel_name, handin_time_start, handin_time_end } = this.state;
    let exportUrl = `${ORIGIN}/api/export/task/list/approver.xlsx?`;
    exportUrl = `${exportUrl}${stringify({
      team_id: teamUser.team_id,
      user_id: currentUser._id,
      approve_status, search, status,
      channel_name,
      handin_time_start,
      handin_time_end
    })}`;
    window.open(exportUrl);
  }
  handleShowDockPanel = (record, activeKey) => {
    this.props.dispatch({
      type: 'task/showDockPanel',
      payload: {
        _id: record._id,
        activeKey,
      },
    });
  }
  handleSpecifyDaren = (record) => {
    this.setState({
      selectedRowKeys: [record._id],
      selectedRows: [record],
    }, () => this.handleDarenModalVisible(true));
  }
  handleDarenModalVisible = (flag) => {
    this.setState({
      darenModalVisible: !!flag,
    });
  }
  handleSpecifyDarenOk = () => {
    const { dispatch, currentUser, } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err && values.target_user_id.length >= 24) {
        let operationText = '';
        if (values.operation === DISPATCH_OPERATION.approve) {
          operationText = '审核';
        } else if (values.operation === DISPATCH_OPERATION.publish) {
          operationText = '发布';
        }
        dispatch({
          type: 'task/dispatchTasks',
          payload: {
            task_ids: this.state.selectedRowKeys,
            user_id: currentUser._id,
            target_user_id: values.target_user_id,
            operation: values.operation,
            operationText,
          },
          callback: (result) => {
            if (result.error) {
              message.error(result.msg);
            } else {
              message.success(result.msg);
              this.handleDarenModalVisible(false);
              this.handleFetch();
              this.handleRowSelectChange([], []);
            }
          },
        });
      } else {
        message.warn('请选择发布！');
      }
    });
  }
  handleUnSpecifyDaren = (record) => {
    const { dispatch, currentUser } = this.props;
    dispatch({
      type: 'task/undaren',
      payload: {
        _id: record._id,
        user_id: currentUser._id,
      },
      callback: (result) => {
        if (result.error) {
          message.error(result.msg);
        } else {
          message.success(result.msg);
          this.handleFetch();
        }
      },
    });
  }
  handleRemove = (record) => {
    const { dispatch, currentUser } = this.props;
    dispatch({
      type: 'task/remove',
      payload: {
        _id: record._id,
        user_id: currentUser._id,
      },
      callback: (result) => {
        if (result.error) {
          message.error(result.msg);
        } else {
          message.success(result.msg);
          this.handleFetch();
        }
      },
    });
  }
  handleSearchDaren = (value) => {
    const { teamUser } = this.props;
    if (value) {
      this.props.dispatch({
        type: 'team/searchUsers',
        payload: {
          team_id: teamUser.team_id,
          nickname: value,
        }
      });
    }
  }
  handlePublishAll = async () => {
    const { selectedRows } = this.state;
    const cannotPublish = selectedRows.find(item => {
      let dispatch = item.dispatchs[item.dispatchs.length - 1];
      if (item.approve_status !== TASK_APPROVE_STATUS.passed) {
        return false;
      } else if (item.approve_status !== TASK_APPROVE_STATUS.waitingToTaobao) {
        if (dispatch && dispatch.receiver_id === this.props.currentUser._id) {
          return false;
        }
        return true;
      }
      return true;
    });
    if (selectedRows.length > 10) {
      message.warn('最多一次发布10篇');
    } else if (cannotPublish) {
      message.destroy();
      message.warn('存在不符合发布条件的稿子');
    } else {
      if (this.state.version) {
        this.props.dispatch({
          type: 'modal/showPublish',
          payload: {
            taskList: selectedRows,
            currentKey: 'approveList',
            version: this.state.version,
          }
        });
      } else {
        message.destroy();
        message.warn('请安装尼采创作平台插件！', 60 * 60);
      }
    }
  }
  handlePublishOk = () => {
    this.handleFetch();
    this.handleGetChannel();
    this.handleRowSelectChange([], []);
  }
  handleDownload = (task) => {
    const iframe = document.createElement('iframe');
    iframe.id = `task-detail-${task._id}`;
    iframe.src = `/task/detail.html?_id=${task._id}&view=export`;
    iframe.style = 'display: none;';
    document.body.appendChild(iframe);
  }
  withdraw = async (record) => {
    const { currentUser } = this.props
    const result = await updateApproveTask({ status: 'moveApproveWithdraw', _id: currentUser._id, task_id: record })
    if (!result.error) {
      message.success(result.msg)
    }
  }
  render() {
    const { data, loading, currentUser, form: { getFieldDecorator }, suggestionUsers } = this.props;
    const { selectedRows, modalVisible, selectedRowKeys, darenModalVisible, channel_list, handin_time_start, handin_time_end } = this.state;
    const showPubish = currentUser.rights && currentUser.rights.indexOf(RIGHT.daren) >= 0;
    const columns = [
      {
        title: '标题',
        dataIndex: 'name',
        render: (val, record) => (
          <div>
            <a target="_blank" href={record.taobao && record.taobao.url ? record.taobao.url : `/task/detail.html?_id=${record._id}`}>
              <TaskNameColumn text={val} length={19} />
            </a>
            <p>
              <MerchantTag text={record.merchant_tag} length={20} />
            </p>
          </div>
        ),
      },
      {
        title: '渠道',
        dataIndex: 'channel_name',
        render: (val, record) => {
          let title = val;
          let channel_name = val;
          if (record.formData && record.formData.activityName) {
            if (val) {
              title = `${title} / ${record.formData.activityName}`;
            } else {
              channel_name = record.formData.activityName;
              title = record.formData.activityName;
            }
          }
          title = `${ACT_TYPE[record.taobao.actType]}：${title}`;

          const distributionStatus = record.taobao.distributionStatus;
          let distribution = '';
          if (distributionStatus) {
            if (distributionStatus.status) distribution = distributionStatus.status;
            else if (distributionStatus.channels) {
              distribution = distributionStatus.channels.map((item, index) =>
                <Tag key={index} className={styles['ant-tag']}>{item}</Tag>);
            }
          }
          return (
            <div>
              <Tooltip placement="top" title={title}>
                {channel_name}
              </Tooltip>
              <div>{distribution}</div>
            </div>
          )
        },
      },
      {
        title: '状态',
        dataIndex: 'approve_status',
        render: (val, record) => {
          if (record.approve_status === TASK_APPROVE_STATUS.publishedToTaobao) {
            return (
              <div>
                <TaskStatusColumn status={val} task={record} />
                <DateTimeColumn value={record.publish_taobao_time} />
              </div>
            )
          } else if (record.approve_status === TASK_APPROVE_STATUS.waitingForApprove) {
            return (
              <div>
                <TaskStatusColumn status={val} task={record} />
                <DateTimeColumn value={record.handin_time} />
              </div>
            )
          } else if (record.approve_status === TASK_APPROVE_STATUS.taken) {
            return (
              <div>
                <TaskStatusColumn status={val} task={record} />
                <DateTimeColumn value={record.take_time} />
              </div>
            )
          } else if (record.approve_status === TASK_APPROVE_STATUS.passed) {
            return (
              <div>
                <TaskStatusColumn status={val} task={record} />
                <DateTimeColumn value={record.approve_time} />
              </div>
            )
          } else if (record.approve_status === TASK_APPROVE_STATUS.rejected) {
            return (
              <div>
                <TaskStatusColumn status={val} task={record} />
                <DateTimeColumn value={record.approve_time} />
              </div>
            )
          } else if (record.approve_status === TASK_APPROVE_STATUS.taobaoRejected) {
            return (
              <div>
                <TaskStatusColumn status={val} task={record} />
              </div>
            )
          } else if (record.approve_status === TASK_APPROVE_STATUS.taobaoAccepted) {
            return (
              <div>
                <TaskStatusColumn status={val} task={record} />
              </div>
            )
          } else if (record.approve_status === TASK_APPROVE_STATUS.waitingToTaobao) {
            return (
              <div>
                <TaskStatusColumn status={val} task={record} />
              </div>
            )
          }
        },
      },
      {
        title: '作者',
        dataIndex: 'taker_id',
        render: (val) => {
          if (val) {
            return val._id === currentUser._id ? '自己' : <TrimSpan text={val.nickname} length={4} />;
          }
          return '';
        },
      },
      {
        title: '阅读数',
        dataIndex: 'taobao',
        render: (val, record) => (
          record.taobao && record.taobao.summary ?
            record.taobao.summary.sumReadCnt.value
            :
            '暂无'
        ),
      },
      {
        title: <div>
          已修改次数
                <Tooltip placement="top" title="在阿里创作平台已修改次数">
            <Icon type="question-circle-o" style={{ marginLeft: 5 }} />
          </Tooltip>
        </div>,
        dataIndex: 'taobao.editStr',
      },
    ];
    const opera = {
      title: '操作',
      render: (record) => {
        const dispatch = record.dispatchs[record.dispatchs.length - 1];
        const { currentUser } = this.props;
        if (!dispatch) return '';
        if (record.approve_status === TASK_APPROVE_STATUS.waitingForApprove) {
          if (dispatch.receiver_id === currentUser._id && dispatch.operation === DISPATCH_OPERATION.approve && dispatch.status === DISPATCH_STATUS.pending) {
            return (
              <div>
                <Link to={`/approver/task/edit?_id=${record._id}`}>
                  <span>审核</span>
                </Link>
                <Divider type="vertical" />
                <Tooltip placement="top" title="转交审核、指定发布">
                  <a onClick={() => this.handleSpecifyDaren(record)}>转移</a>
                </Tooltip>
                <Divider type="vertical" />
                <Popconfirm placement="left" title={`确认退回给小编?`} onConfirm={() => this.handleReject(record)} okText="确认" cancelText="取消">
                  <Tooltip placement="top" title="退回给小编">
                    <a>退回</a>
                  </Tooltip>
                </Popconfirm>
                <Divider type="vertical" />
                <a onClick={() => this.handleShowDockPanel(record, 'OperationPane')}>
                  动态
                </a>
                <Divider type="vertical" />
                <a onClick={() => this.handleDownload(record)}>
                  下载
                </a>
              </div>
            );
          } else {
            return (
              <div>
                <Link to={`/approver/task/view?_id=${record._id}`}>
                  查看
                </Link>
                <Divider type="vertical" />
                <a onClick={() => this.handleShowDockPanel(record, 'OperationPane')}>
                  动态
                </a>
                {/* <Divider type="vertical" />
                <a onClick={() => this.withdraw(record._id)}>
                  撤回
                </a> */}
                <Divider type="vertical" />
                <a onClick={() => this.handleDownload(record)}>
                  下载
                </a>
              </div>
            );
          }
        } else if (record.approve_status === TASK_APPROVE_STATUS.rejected) {
          return (
            <div>
              <Link to={`/approver/task/view?_id=${record._id}`}>
                查看
              </Link>
              <Divider type="vertical" />
              <a onClick={() => this.handleShowDockPanel(record, 'OperationPane')}>
                动态
              </a>
              <Divider type="vertical" />
              <a onClick={() => this.handleDownload(record)}>
                下载
              </a>
            </div>
          );
        } else if (record.approve_status === TASK_APPROVE_STATUS.passed) {
          // if (dispatch.receiver_id === currentUser._id && dispatch.operation === DISPATCH_OPERATION.approve && dispatch.status === DISPATCH_STATUS.processed) {
            return (
              <div>
                {showPubish && <a onClick={() => this.handlePublish(record)}><PublisherChannelsPopover channel_list={channel_list}>发布</PublisherChannelsPopover></a>}
                {showPubish && <Divider type="vertical" />}
                <Tooltip placement="top" title="转交审核、指定发布">
                  <a onClick={() => this.handleSpecifyDaren(record)}>转移</a>
                </Tooltip>
                <Divider type="vertical" />
                <Link to={`/approver/task/edit?_id=${record._id}`}>
                  <span>编辑</span>
                </Link>
                {(record.source === SOURCE.deliver || record.source === SOURCE.create || record.source === SOURCE.pass) && <Divider type="vertical" />}
                {(record.source === SOURCE.deliver || record.source === SOURCE.create || record.source === SOURCE.pass) &&
                  <Popconfirm placement="left" title={`确认删除?`} onConfirm={() => this.handleRemove(record)} okText="确认" cancelText="取消">
                    <a>删除</a>
                  </Popconfirm>
                }
                <Divider type="vertical" />
                <a onClick={() => this.handleShowDockPanel(record, 'OperationPane')}>
                  动态
                </a>
                <Divider type="vertical" />
                <a onClick={() => this.handleDownload(record)}>
                  下载
                </a>
              </div>
            );
          // } else {
          //   return (
          //     <div>
          //       <Link to={`/approver/task/view?_id=${record._id}`}>
          //         查看
          //       </Link>
          //       <Divider type="vertical" />
          //       <a onClick={() => this.handleShowDockPanel(record, 'OperationPane')}>
          //         动态
          //       </a>
          //       <Divider type="vertical" />
          //       <a onClick={() => this.handleDownload(record)}>
          //         下载
          //       </a>
          //     </div>
          //   );
          // }
        } else if (record.approve_status === TASK_APPROVE_STATUS.waitingToTaobao) {
          if (dispatch.receiver_id === currentUser._id && dispatch.operation === DISPATCH_OPERATION.publish && dispatch.status === DISPATCH_STATUS.pending) {
            return (
              <div>
                {showPubish && <a onClick={() => this.handlePublish(record)}><PublisherChannelsPopover channel_list={channel_list}>发布</PublisherChannelsPopover></a>}
                {showPubish && <Divider type="vertical" />}
                <Tooltip placement="top" title="转交审核、指定发布">
                  <a onClick={() => this.handleSpecifyDaren(record)}>转移</a>
                </Tooltip>
                <Divider type="vertical" />
                <Link to={`/approver/task/edit?_id=${record._id}`}>
                  <span>编辑</span>
                </Link>
                <Divider type="vertical" />
                <a onClick={() => this.handleShowDockPanel(record, 'OperationPane')}>
                  动态
                </a>
                <Divider type="vertical" />
                <a onClick={() => this.handleDownload(record)}>
                  下载
                </a>
              </div>
            );
          } else if (dispatch.sender_id === currentUser._id && dispatch.operation === DISPATCH_OPERATION.publish && dispatch.status === DISPATCH_STATUS.pending) {
            return (
              <div>
                {/*<Popconfirm placement="left" title={`确认撤回?`} onConfirm={() => this.handleUnSpecifyDaren(record)} okText="确认" cancelText="取消">
                  <Tooltip placement="top" title="从发布撤回">
                    <a>撤回</a>
                  </Tooltip>
                </Popconfirm>*/}
                {/*<Divider type="vertical" />*/}
                <a onClick={() => this.handleShowDockPanel(record, 'OperationPane')}>
                  动态
                </a>
                <Divider type="vertical" />
                <a onClick={() => this.handleDownload(record)}>
                  下载
                </a>
              </div>
            );
          } else {
            return (
              <div>
                <Link to={`/approver/task/view?_id=${record._id}`}>
                  查看
                </Link>
                <Divider type="vertical" />
                <a onClick={() => this.handleShowDockPanel(record, 'OperationPane')}>
                  动态
                </a>
                <Divider type="vertical" />
                <a onClick={() => this.handleDownload(record)}>
                  下载
                </a>
              </div>
            );
          }
        } else if (record.approve_status === TASK_APPROVE_STATUS.taobaoRejected) {
          return (
            <div>
              <Popconfirm placement="left" title={`确认退回给小编?`} onConfirm={() => this.handleReject(record)} okText="确认" cancelText="取消">
                <Tooltip placement="top" title="退回给小编">
                  <a>退回</a>
                </Tooltip>
              </Popconfirm>
              <Divider type="vertical" />
              <Link to={`/approver/task/edit?_id=${record._id}`}>
                <span>编辑</span>
              </Link>
              <Divider type="vertical" />
              <a onClick={() => { this.setState({ extension: record.taobao.url, extensionVisible: true }) }}>
                推广
              </a>
              <Divider type="vertical" />
              <a onClick={() => this.handleShowDockPanel(record, 'AnalyzePane')}>
                分析
              </a>
              <Divider type="vertical" />
              <a onClick={() => this.handleDownload(record)}>
                下载
              </a>
            </div>
          );
        } else {
          return (
            <div>
              <a onClick={() => { this.setState({ extension: record.taobao.url, extensionVisible: true }) }}>
                推广
              </a>
              <Divider type="vertical" />
              <a onClick={() => this.handleShowDockPanel(record, 'AnalyzePane')}>
                分析
              </a>
              <Divider type="vertical" />
              <a onClick={() => this.handleDownload(record)}>
                下载
              </a>
            </div>
          );
        }
      },
    }
    columns.push(opera);
    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };
    const totals = data.totals;
    return (
      <div>
        <div className={styles.searchBox}>
          {/*<RadioGroup value={data.status} onChange={this.changeDispatchStatus}>
            <Tooltip placement="top" title="需要你处理的">
              <RadioButton value="pending">待处理 {totals.pending}</RadioButton>
            </Tooltip>
            <Tooltip placement="top" title="你已经处理的">
              <RadioButton value="processed">已处理 {totals.processed}</RadioButton>
            </Tooltip>
          </RadioGroup>*/}

          <RadioGroup value={data.approve_status} onChange={this.changeApproveStatus}>
            <Tooltip key="all" placement="top" title="全部状态">
              <RadioButton value="all" >全部 {totals.all}</RadioButton>
            </Tooltip>
            <Tooltip key="waitingForApprove" placement="top" title="等待审核">
              <RadioButton value="waitingForApprove">待审核 {totals.waitingForApprove}</RadioButton>
            </Tooltip>
            <Tooltip key="rejected" placement="top" title="平台审核未通过">
              <RadioButton value="rejected">未通过 {totals.rejected}</RadioButton>
            </Tooltip>
            <Tooltip key="passed" placement="top" title="平台审核已通过">
              <RadioButton value="passed">已通过 {totals.passed}</RadioButton>
            </Tooltip>
            <Tooltip key="waitingToTaobao" placement="top" title="待发布到淘宝">
              <RadioButton value="waitingToTaobao">
                待发布 {totals.waitingToTaobao}
              </RadioButton>
            </Tooltip>
            <Tooltip key="publishedToTaobao" placement="top" title="已发布到淘宝">
              <RadioButton value="publishedToTaobao">
                已发布 {totals.publishedToTaobao}
              </RadioButton>
            </Tooltip>
            <Tooltip key="taobaoRejected" placement="top" title="淘宝审核不通过">
              <RadioButton value="taobaoRejected">
                淘宝不通过 {totals.taobaoRejected}
              </RadioButton>
            </Tooltip>
            <Tooltip key="taobaoAccepted" placement="top" title="淘宝审核已通过">
              <RadioButton value="taobaoAccepted">
                淘宝通过 {totals.taobaoAccepted}
              </RadioButton>
            </Tooltip>
          </RadioGroup>
          <Button icon="export" style={{ float: 'right' }} onClick={this.handleExport}>导出</Button>
        </div>
        <Card bordered={false} bodyStyle={{ padding: 14 }}>
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
              {selectedRows.length === 0 && (
                <span>
                  <Select
                    allowClear
                    showSearch
                    style={{ width: 160, marginRight: 8 }}
                    placeholder="渠道"
                    onChange={(value) => this.handleSearch(value, 'channel_name')}
                    optionFilterProp="children"
                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    value={this.state.channel_name}
                  >
                    {CHANNELS.map(item => <Option key={item.id} value={item.name}>{item.name}</Option>)}
                  </Select>
                  <RangePicker style={{ width: 240 }} onChange={(value) => this.handleSearch(value, 'time')}
                    value={handin_time_start ? [moment(handin_time_start), moment(handin_time_end)] : []} />
                  <Tooltip placement="top" title="提交审核时间">
                    <Icon type="question-circle-o" style={{ marginLeft: 8 }} />
                  </Tooltip>
                  <Search
                    style={{ width: 260, float: 'right' }}
                    placeholder="ID／名称／商家名称／昵称"
                    value={this.state.search}
                    onChange={this.handleSearchChange}
                    onSearch={(value) => this.handleSearch(value, 'search')}
                    enterButton
                  />
                </span>)
              }
              {selectedRows.length > 0 && (data.approve_status === 'passed' || data.approve_status === 'waitingForApprove') && (
                <span>
                  <Button icon="swap" type="default" onClick={() => this.handleDarenModalVisible(true)}>批量转移</Button>
                </span>
              )
              }
              {selectedRows.length > 0 && (data.approve_status === 'waitingForApprove') && (
                <span>
                  <Popconfirm placement="left" title={`确认通过所有选中的任务?`} onConfirm={() => this.handleApproveBatch()} okText="确认" cancelText="取消">
                    <Button icon="check" type="default">批量通过</Button>
                  </Popconfirm>
                </span>
              )
              }
              {selectedRows.length > 0 && (data.approve_status === 'passed' || data.approve_status === 'waitingToTaobao') && showPubish && (
                <span>
                  <Button icon="upload" type="default" onClick={this.handlePublishAll}>批量发布</Button>
                </span>
              )
              }
              <PublishModal k='approveList' onOk={this.handlePublishOk} />
            </div>
            <Table
              loading={loading}
              dataSource={data.list}
              columns={columns}
              pagination={{
                showSizeChanger: true,
                showQuickJumper: true,
                ...data.pagination,
              }}
              onChange={this.handleStandardTableChange}
              rowKey="_id"
              rowSelection={rowSelection}
            />
            {darenModalVisible && <Modal
              title="转移"
              visible={darenModalVisible}
              onOk={this.handleSpecifyDarenOk}
              onCancel={() => this.handleDarenModalVisible(false)}
            >
              <FormItem
                  label="类型"
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 20 }}
                >
                  {getFieldDecorator('operation', {
                    initialValue: DISPATCH_OPERATION.approve,
                    rules: [{ required: true, message: '请选择指定类型！' }],
                  })(
                    <RadioGroup>
                      <RadioButton value={DISPATCH_OPERATION.approve}>转交审核</RadioButton>
                      <RadioButton value={DISPATCH_OPERATION.publish}>指定发布</RadioButton>
                    </RadioGroup>
                  )}
                </FormItem>
              <FormItem
                label="收件人"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 20 }}
              >
                {getFieldDecorator('target_user_id', {
                  initialValue: '',
                  rules: [{ required: true, message: '请选收件人！' }],
                })(
                  <Select
                    style={{ width: '100%' }}
                    mode="combobox"
                    optionLabelProp="children"
                    placeholder="搜索昵称"
                    notFoundContent=""
                    defaultActiveFirstOption={false}
                    showArrow={false}
                    filterOption={false}
                    onSearch={this.handleSearchDaren}
                  >
                    {suggestionUsers.filter(item => item._id !== currentUser._id).map(item => <Option value={item._id} key={item._id}>{item.nickname}</Option>)}
                  </Select>
                )}
              </FormItem>
            </Modal>}
            <DockPanel />
            <Extension visible={this.state.extensionVisible} url={this.state.extension} onCancel={() => this.setState({ extensionVisible: false })} />
          </div>
        </Card>
      </div>
    );
  }
}
